<template>
  <div class="tree-container">
    <el-tree 
      :data="treeData" 
      :node-key="nodeKey" 
      @node-click="menuLeftClick" 
      @node-drag-start="dragStartItem"          
      @node-drag-end="dragEndItem" 
      @node-contextmenu="menuRightClick"  
      :props="defaultProps"
      :default-expanded-keys="expandedKeys"
      :draggable="draggable"
      :default-expand-all="expandALL"
      ref="tree"
      class="custom-tree">
      <div class="slot-t-node" slot-scope="{ node, data }" @dblclick="editNode(node,data)" v-if="isCompany">
        <span v-if="data.isenterprise == 1"><i class="iconfont">&#xe67b;</i>　{{data.orgname}}</span>
        <span v-if="data.isenterprise == 0"><i class="iconfont">&#xe6df;</i>　{{data.orgname}}</span>
      </div>
      <div class="slot-t-node" slot-scope="{ node, data }" @dblclick="editNode(node,data)" v-else>
        <i class="iconfont yellowText" style="font-size: 13px;margin-right: 4px;" v-if="data.children&& data.children.length > 0">&#xe604;</i>
        <span>{{ data[name] }}</span>
      </div>
    </el-tree>
    <transition name="menu-fade">
      <div class="context-menu-wrapper" v-show="menuVisible" :style="menuStyle" ref="contextMenu">
        <div class="context-menu" >
          <div class="menu-header">
            <span class="menu-title">节点操作</span>
            <i class="el-icon-close close-icon" @click="menuVisible = false"></i>
          </div>
          <div class="menu-divider"></div>
          <div class="menu-content">
            <div v-if="!isInstrument">
              <div class="menu-item" @click="addSameLevelItem()" v-if="showRoleAdd">
                <i class="el-icon-folder-add menu-icon"></i>
                <span class="menu-text">同级增加</span>
              </div>
              <div class="menu-item" @click="addChildLevelItem()" v-if="showRoleAdd">
                <i class="el-icon-plus menu-icon"></i>
                <span class="menu-text">子级增加</span>
              </div>
              <div class="menu-item" @click="editMenuItem()" v-if="showRoleEdit">
                <i class="el-icon-edit menu-icon"></i>
                <span class="menu-text">修改节点</span>
              </div>
              <div class="menu-item menu-item-danger" @click="delMenuItem()" v-if="showRoleDel">
                <i class="el-icon-delete menu-icon"></i>
                <span class="menu-text">删除节点</span>
              </div>
              <div class="menu-item" @click="importMenuItem()" v-if="isImport && showRoleAdd">
                <i class="el-icon-upload2 menu-icon"></i>
                <span class="menu-text">导入节点</span>
              </div>
              <div class="menu-item" @click="timeMenuItem()" v-if="isTime">
                <i class="el-icon-time menu-icon"></i>
                <span class="menu-text">设置时间</span>
              </div>
              <div class="menu-item" @click="gussetMenuItem()" v-if="isGusset">
                <i class="el-icon-setting menu-icon"></i>
                <span class="menu-text">节点设置</span>
              </div>
              <div class="menu-item" @click="signMenuItem()" v-if="isSign">
                <i class="el-icon-collection-tag menu-icon"></i>
                <span class="menu-text">标签管理</span>
              </div>
              <div class="menu-item" @click="videoMenuPlay()" v-if="isVideo">
                <i class="el-icon-video-play menu-icon"></i>
                <span class="menu-text">播放</span>
              </div>
              <div class="menu-item" @click="videoMenuSet()" v-if="isVideo">
                <i class="el-icon-monitor menu-icon"></i>
                <span class="menu-text">设置/流查看</span>
              </div>
            </div>
            <div v-else>
              <div class="menu-item" @click="addSameLevelItem()" v-if="nodeLevel == 1 && showRoleAdd">
                <i class="el-icon-plus menu-icon"></i>
                <span class="menu-text">同级增加</span>
              </div>
              <div class="menu-item" @click="addChildLevelItem()" v-if="nodeLevel == 1 && showRoleAdd">
                <i class="el-icon-folder-add menu-icon"></i>
                <span class="menu-text">子级增加</span>
              </div>
              <div class="menu-item" @click="editMenuItem()" v-if="showRoleEdit">
                <i class="el-icon-edit menu-icon"></i>
                <span class="menu-text">修改节点</span>
              </div>
              <div class="menu-item menu-item-danger" @click="delMenuItem()" >
                <i class="el-icon-delete menu-icon"></i>
                <span class="menu-text">删除节点</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'tree',
  props:{
    treeData:{
      type:Array,
      default:()=>[]
    },
    showRoleDel:{
      type:Number,
      default:1,
    },
    showRoleAdd:{
      type:Number,
      default:1,
    },
    showRoleEdit:{
      type:Number,
      default:1,
    },
    name:{
      type:String,
      default:'name'
    },
    nodeKey:{
      type:String,
      default:'id'
    },
    draggable:{
      type:Boolean,
      default:false
    },
    defaultProps: {
      type:Object,
      default:()=>{
        return{
          children: 'children',
          label: 'name'
        }
      }   
    },
    isRightMenu:{
      type:Boolean,
      default:false
    },
    isImport:{
      type:Boolean,
      default:false
    },
    isTime:{
      type:Boolean,
      default:false
    },
    expandALL:{
      type:Boolean,
      default:false
    },
    isGusset:{
      type:Boolean,
      default:false
    },
    isCompany:{
      type:Boolean,
      default:false
    },
    isInstrument:{
      type:Boolean,
      default:false
    },
    isSign:{
      type:Boolean,
      default:false
    },
    isVideo:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      currentData: {},
      menuVisible: false,
      nodeLevel: '',
      menuStyle: {
        left: '0px',
        top: '0px'
      }
    }
  },
  computed: {
    expandedKeys() {
        return this.expandFirstPath(this.treeData)
    }
  },
  methods: {
    expandFirstPath() {
      const keys = []
      if (this.treeData.length > 0) {
        let current = this.treeData[0] 
        keys.push(current.id)
        while (current.children && current.children.length > 0) {
          current = current.children[0]
          keys.push(current.id)
        }
        return keys
      }
    },
    menuRightClick(event, object, Node, element) {
      this.nodeLevel = Node.level
      if(this.isRightMenu){
        this.currentData = object
        this.menuVisible = true
        document.addEventListener('click', this.foo)
        const menuWidth = 180
        const menuHeight = 300
        
        let finalLeft = event.clientX + 10
        let finalTop = event.clientY + 10
        
        if (finalLeft + menuWidth > window.innerWidth) {
          finalLeft = Math.max(10, window.innerWidth - menuWidth - 10)
        }
        
        if (finalTop + menuHeight > window.innerHeight) {
          finalTop = Math.max(10, window.innerHeight - menuHeight - 10)
        }
        
        this.menuStyle = {
          left: finalLeft + 'px',
          top: finalTop + 'px'
        }
        
        event.preventDefault()
      }
    },
    menuLeftClick(data,node) {
      this.menuVisible = false
      this.$emit('menuLeftClick',data.node || data,node)
    },
    foo() {
      this.menuVisible = false
      document.removeEventListener('click', this.foo)
    },
    addSameLevelItem() {
      // 第一项为选中项数据
      // 第二项为是否为编辑 ： 0代表新增 1代表编辑
      // 第三项为是否为同级 ：1 为同级 2 为子级
      // nodeLevel层级
      this.$emit('addMenuItem',this.currentData,0,1,this.nodeLevel)
    },
    addChildLevelItem() {
      // 第一项为选中项数据
      // 第二项为是否为编辑 ： 0代表新增 1代表编辑
      // 第三项为是否为同级 ：1 为同级 2 为子级
      // nodeLevel层级
      this.$emit('addMenuItem',this.currentData,0,2,this.nodeLevel)
    },
    delMenuItem() {
      this.$emit('delMenuItem',this.currentData,this.nodeLevel)
    },
    editMenuItem(data) {
      // 第一项为选中项数据
      // 第二项为是否为编辑 ： 1代表编辑
      // nodeLevel层级
      this.currentData = data ? data : this.currentData
      this.$emit('editMenuItem',this.currentData,1,this.nodeLevel)
    },
    dragStartItem(node, ev) {
      this.$emit('dragStartItem',node, ev)
    },
    dragEndItem(draggingNode, dropNode, dropType, ev) {
      this.$emit('dragEndItem',draggingNode.data, dropNode.data, dropType, ev)
    },
    importMenuItem(){
      this.$emit('importMenuItem',this.currentData)
    },
    timeMenuItem(){
      this.$emit('timeMenuItem',this.currentData)
    },
    gussetMenuItem(){
      this.$emit('gussetMenuItem',this.currentData)
    },
    signMenuItem(){
      this.$emit('signMenuItem',this.currentData)
    },
    videoMenuPlay(){
      this.$emit('videoMenuPlay',this.currentData)
    },
    videoMenuSet(){
      this.$emit('videoMenuSet',this.currentData)
    },
    editNode(node, data) {
      this.editMenuItem(data)
    },
  }
}
</script>

<style scoped lang="scss">
.tree-container {
  position: relative;
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    color: #409eff !important;
    font-weight: bold;
  }
 
  ::v-deep .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
 
  ::v-deep .el-icon-caret-right:before {
    content: "\e791";
    font-size: 18px;
  }
 
  ::v-deep .el-tree-node__expand-icon {
    padding: 0px;
  }
 
  ::v-deep .el-tree-node__expand-icon.is-leaf {
    margin-left: 0px;
  }
 
  ::v-deep .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
 
  ::v-deep .el-tree-node__children {
    padding-left: 16px;
  }
 
  ::v-deep .el-tree > .el-tree-node:before {
    border-left: none;
  }
 
  ::v-deep .el-tree > .el-tree-node:after {
    border-top: none;
  }
 
  ::v-deep .el-tree-node:before {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
 
  ::v-deep .el-tree-node:after {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
 
  ::v-deep .el-tree-node:before {
    border-left: 1px dashed #e6ebf5;
    bottom: 0px;
    height: 100%;
    top: -19px;
    width: 1px;
  }
 
  ::v-deep .el-tree-node:after {
    border-top: 1px dashed #e6ebf5;
    height: 25px;
    top: 20px;
    width: 20px;
  }
 
  .el-tree-node :last-child:before {
    height: 40px;
  }
  
  ::v-deep .el-tree .el-tree-node {
    position: relative;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content {
    height: 34px;
    padding-left: 0px !important;
    border: none;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content::before {
    height: 100%;
    top: 0;
    width: 1px;
    margin-left: 1px;
    margin-top: 0px;
  }
  
  ::v-deep .el-tree-node .el-tree-node__children .el-tree-node__content::before {
    border-left: 0px dashed #e1e5eb;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content::after {
    height: 1px;
    top: 18px;
    width: 13px;
    margin-left: 1px;
  }
  
  ::v-deep .el-tree-node .el-tree-node__children .el-tree-node__content::after {
    border-top: 0px dashed #e1e5eb;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content::before,
  ::v-deep .el-tree-node .el-tree-node__content::after {
    content: "";
    position: absolute;
    right: auto;
  }
}

.context-menu-wrapper {
  position: fixed;
  z-index: 9999;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 
              0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid #e1e5eb;
  overflow: hidden;
  min-width: 180px;
}

.context-menu {
  background: white;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #667eea;
  
  .menu-title {
    color: white;
    font-size: 14px;

  }
  
  .close-icon {
    color: white;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.8;
    transition: opacity 0.2s;
    
    &:hover {
      opacity: 1;
    }
  }
}

.menu-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.menu-content {
  padding: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
    transition: left 0.3s ease;
  }
  
  &:hover::before {
    left: 100%;
  }
  
  &:hover {
    background: #f8f9ff;
    
    .menu-icon {
      color: #667eea;
      transform: scale(1.1);
    }
    
    .menu-text {
      color: #667eea;
    }
  }
  
  .menu-icon {
    margin-right: 12px;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.2s ease;
  }
  
  .menu-text {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    transition: color 0.2s ease;
  }
}

.menu-item-danger {
  &:hover {
    background: #fef2f2;
    
    .menu-icon,
    .menu-text {
      color: #ef4444;
    }
  }
}

// 动画效果
.menu-fade-enter-active {
  animation: menu-fade-in 0.2s ease;
}

.menu-fade-leave-active {
  animation: menu-fade-out 0.15s ease;
}

@keyframes menu-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes menu-fade-out {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) translateY(-5px);
  }
}

.custom-tree {
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  background: none;
}

.slot-t-node {
  display: flex;
  align-items: center;
}
</style>